<template>
  <!--结算页  -->

  <div class="wrap">
    <v-header>
      <v-back></v-back>
    </v-header>
    <!--  -->
    <div class="wrap_top"></div>

    <!-- 完善地址 -->
    <div class="newAddress">
      <p v-show="!addressActive">+点击完善收货地址</p>
      <!-- 默认地址 -->
      <div class="oldAdd" v-show="addressActive">
          <div>
            <span>{{myAddress.username}}</span>
            <span>{{myAddress.userphone}}</span>
          </div>
          <div>
            <span>默认</span>
            <span>{{myAddress.label}}</span>
            <span>{{myAddress.location + myAddress.useraddress}}</span>
          </div>
        
      </div>
    </div>

    <div class="main">
      <div class="mian_top" v-for="item in catesData" :key="item.id">
        <p>
          <span><img  src="./img/selfsupport.png" alt="" /></span>
          <span>品牌精选</span>
        </p>
        <p>
          <span>已免运费&nbsp;|</span>
          <span>领劵</span>
        </p>
        <div class="cate">
          <div class="left">
            <img :src="_localhost+item.img"  alt="" />
          </div>
          <div class="right">
            <div>{{item.goodsname}}</div>
            <div>￥{{item.price}}</div>
            <div>
              <span>七天无理由退货</span>
              <span>x{{item.num}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 发票类型 -->
      <div class="ps">
        <p class="p1">
          <span>发票类型</span>
          <span class="ps3">不开发票></span>
        </p>
        <p class="p1">
          <span>售后免邮</span>
          <span class="ps2">部分商家赠送</span>
        </p>
        <p class="p1">
          <span>卖家留言</span>
          <span class="ps2">填写内容需要与商家协商并确认，45字以内</span>
        </p>
      </div>
      <!-- 商品金额 -->
      <div class="ps money">
        <p class="p1">
          <span>商品金额</span>
          <span class="ps3">￥{{allPrice}}</span>
        </p>
        <p class="p1">
          <span>优惠金额</span>
          <span class="ps4">-￥200</span>
        </p>
        <p class="p1">
          <span>优惠券</span>
          <span class="ps2">更多优惠券></span>
        </p>
      </div>

      <div class="mian_bottom"></div>
    </div>
    <!-- 合计 -->
    <div class="bottom">
      <div class="left">
        <p>
          <span>合计</span>
          <span>￥{{allPrice}}</span>
        </p>
        <p>
          <span>已免运费</span>
          <span>已优惠</span>
        </p>
      </div>

      <div class="right" @click="makeSure">确认订单</div>
    </div>
  </div>
</template>

<script>
import {getaddresslist,getorderadd} from '@/request/api.js'
import {Toast} from 'vant'
export default {
  data(){
    return {
      addressActive:true,
      catesData:[
        {goodsid:7,goodsname:"华为",id:2,img:"/update",num:3,price:6299}
      ],
      // 默认地址
      myAddress:{},
      idstr:'',
    }
  },
  computed:{
    allPrice(){
      let all = null
      this.catesData.forEach((v,i,self)=>{
        all += v.price * v.num 
      })
      return all;
    },
    allNum(){
      let all = null
      this.catesData.forEach((v,i,self)=>{
        all += v.num 
      })
      return all;
    }
  },
  methods: {
    onSubmit() {},
    // 跳转到支付页
    async makeSure(){
      console.log(222);
      this.catesData.forEach((v,i,self)=>{
        this.idstr += String(v.id)  
      })
      console.log(this.idstr,123455);
      this.idstr = this.idstr.split('').join(',')
      console.log(this.idstr);
      let obj  = {
        "uid" : this.catesData[0].uid,
        "countmoney":this.allPrice,
        "countnumber":this.allNum,
        "address":1,
        "idstr":this.idstr
      }
      // console.log(obj);
      let getorderaddRes = await getorderadd(obj)
      // console.log(getorderaddRes,'getorderaddRes');

      if(getorderaddRes.data.code == 200){

        let listCode = getorderaddRes.data.list.outTradeNo;


        Toast.success(getorderaddRes.data.msg)
        setTimeout(() => {
          // this.$router.push({path:'/pay',query:{obj}})
          this.$router.push(`/pay?listCode=${listCode}&money=${this.allPrice}`)

        }, 2000);
      }
      
      // this.$router.push('/pay')
    }
  },
   async created(){
    //  渲染选中商品
     console.log(this.$route);
     console.log('订单',this.$route.query.obj);
    

     console.log( localStorage.catesData);
     this.catesData = this.$route.query.obj 
    //  获取默认地址
    let obj = {
      uid:this.catesData[0].uid,
      status:1,
    }
    let getaddresslistRes = await getaddresslist(obj)
    if(getaddresslistRes.data.code!==200){
      this.$router.push('/index/home')
      return;
    }
    this.myAddress = getaddresslistRes.data.list[0]
    this.addressActive = getaddresslistRes.data.list[0]?true:false
    console.log(getaddresslistRes);
    
  }
};
</script>
<style scoped lang="less">
.wrap {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
.wrap_top {
  width: 100vw;
  height: 0.8rem;
  background-color: tomato;
}
//newAddress
.newAddress {
  width: 90vw;
  height: 30vw;
  background-color: #fff;
  position: absolute;
  top: 10%;
  left: 5vw;
  p {
    width: 1.7rem;
    height: 0.4rem;
    border: 1px solid #dca25c;
    color: #dca25c;
    margin: 0 auto;
    margin-top: 0.2rem;
    line-height: 0.4rem;
    padding: 0 0.1rem;
    box-sizing: border-box;
    font-weight: 600;
    background-color: #fcf5ed;
    border-radius: 0.1rem;
  }
}
.main {
  margin-top: 0.7rem;
  .mian_top {
    width: 100vw;
    height: 35vh;
    background-color: #fff;
    margin: 0 auto;
    padding: 0.1rem;
    box-sizing: border-box;
    p {
      &:nth-child(1) {
        float: left;
        span {
          &:nth-child(1),
          &:nth-child(1) > img {
            width: 0.15rem;
            height: 0.15rem;
            vertical-align: middle;
            font-size: 0;
          }
          &:nth-child(2) {
            margin-left: 0.1rem;
            width: 1rem;
            height: 0.4rem;
            line-height: 0.4rem;
            font-weight: 600;
          }
        }
      }
      &:nth-child(2) {
        float: right;
        height: 0.4rem;
        line-height: 0.4rem;

        span {
          &:nth-child(1) {
            font-size: 0.14rem;
            font-weight: 600;
          }
          &:nth-child(2) {
            font-size: 0.14rem;
            color: tomato;
            font-weight: 600;
          }
        }
      }
    }
  }
  .cate {
    margin-top: 0.4rem;
    .left,
    .left > img {
      width: 30vw;
      height: 45vw;
      float: left;
    }
    .right {
      margin-left: 0.2rem;
      float: left;
      width: 55vw;
      div {
        &:nth-child(1) {
          margin-top: 0.2rem;
          font-weight: 600;
        }
        &:nth-child(2) {
          margin-top: 0.3rem;
          color: tomato;
          font-size: 0.2rem;
        }
        &:nth-child(3) {
          span {
            &:nth-child(1) {
              display: inline-block;
              height: 0.4rem;
              width: 0.79rem;
              text-align: center;
              margin-top: 0.1rem;
              background-color: #fe8067;
              color: white;
              font-size: 0.13rem;
              line-height: 0.2rem;
            }
            &:nth-child(2) {
              float: right;
              // line-height: .4rem;
              margin-top: 0.2rem;
            }
          }
        }
      }
    }
  }
  .ps {
    width: 100vw;
    //   margin-top: .2rem;
    .p1 {
      height: 0.4rem;
      //   width: 100vw;
    }
  }
}
// 发票
.ps {
  background-color: #fff;
  width: 80vw;
  padding: 0.1rem;
  box-sizing: border-box;
  .p1 {
    span {
      &:nth-child(1) {
        float: left;
        font-weight: 600;
        font-size: 0.14rem;
        color: #333;
      }
      &:nth-child(2) {
        float: right;
      }
    }
    .ps2 {
      color: #999;
      font-size: 0.13rem;
    }
    .ps3 {
      color: #666;
      font-size: 0.14rem;
      font-weight: 600;
    }
    .ps4 {
      color: tomato;
    }
  }
}
// money商品金额 补充
.money {
  margin-top: 0.1rem;
}
// 占位
.mian_bottom {
  height: 0.5rem;
  width: 100vw;
}
// 合计
.bottom {
  position: fixed;
  width: 100vw;
  height: 0.6rem;
  bottom: 0;
  background-color: #fff;
  .left {
    float: left;
    padding: 0.05rem 0.1rem;
    box-sizing: border-box;
    p {
      &:nth-child(1) {
        span {
          //   合计
          &:nth-child(1) {
            font-weight: 600;
          }
          //   价钱
          &:nth-child(2) {
            color: tomato;
            margin-left: 0.55rem;
            font-weight: 600;
          }
        }
      }
      &:nth-child(2) {
        margin-top: 0.1rem;
        span {
          //   已免运费
          &:nth-child(1) {
            font-weight: 600;
            color: #ccc;
          }
          //   已优惠
          &:nth-child(2) {
            color: #ccc;
            margin-left: 0.3rem;
            font-weight: 600;
          }
        }
      }
    }
  }
  .right {
    float: right;
    background: tomato;
    color: white;
    height: 0.6rem;
    width: 1rem;
    line-height: 0.6rem;
    text-align: center;
  }
}



// 
.oldAdd{
  padding: .2rem;
  box-sizing: border-box;
  div{
    &:nth-child(1){
      span{
        font-weight: 600;
        &:nth-child(2){
          margin-left: .2rem;
        }
      }
      
    }
    &:nth-child(2){
      margin-top: .1rem;
      span{
        display: inline-block;
        &:nth-child(1){
          font-size: .14rem;
          color: tomato;
          font-weight: 600;
          border-radius: 50%;
          border: 1px solid tomato;
          padding: .02rem;
          background-color: #FAF0EC;
        }
        &:nth-child(2){
          font-size: .14rem;
          color: #3D83CC;
          font-weight: 600;
          border-radius: 50%;
          border: 1px solid #3D83CC;
          padding: .02rem;
          background-color: #3D83CC33;
          margin-left: .1rem;
        }
        &:nth-child(3){
          font-size: .14rem;
          margin-left: .1rem;
        }
      }
    }
  }
}
</style>